@import 'var';

$label-color: $grey-8;
$text-width: 120px;
$label-height: 18px;
$inline-horizontal-label-height: 32px;

/*
覆盖ant表单样式，实现表单项块级上下布局，当form元素有 no-custom 类样式的时候取消样式覆盖
*/
.ant-form-inline:not(.no-custom) .ant-form-item {
  width: 100%;
  margin-bottom: 0;
  margin-top: $label-height;

  .ant-form-item-label {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ant-form-item-control-wrapper {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ant-time-picker {
    width: 100%;
  }

  .ant-input-number {
    width: 100%;
  }

  .ant-form-item-label label {
    position: absolute;
    // background-color: #fff;
    z-index: 100;
    left: 0;
    top: -$label-height;
    line-height: $label-height;
    padding-right: 2px;
    color: $label-color;
    max-width: 100%;
    overflow: hidden;
  }

  .ant-form-item-label.inner label {
    left: 1em;
    top: -4px;
    padding-left: 5px;

    &::after {
      position: absolute;
      top: 5px;
      left: 0;
      width: 100%;
      border-top: solid 4px #fff;
      content: '';
      z-index: -1;
    }

    &::before {
      margin-right: 0;
    }
  }

  .ant-form-item-control {
    line-height: 0;
  }

  // .ant-form-explain {
  //   right: 0;
  //   height: $box-space*0.75;
  //   min-height: $box-space*0.75;
  //   margin-top: 0;
  //   text-align: right;
  // }

  .custom-explain {
    height: 1em;
    text-align: right;
  }
}

.ant-form-inline:not(.no-custom) .action-bar .ant-form-item-control-wrapper {
  width: 100% !important;
}

/*
覆盖ant表单样式，实现表单项块级左右布局，当form元素有 no-custom 类样式的时候取消样式覆盖
*/
.ant-form-inline.inline-horizontal:not(.no-custom) .ant-form-item {
  margin-top: unset;

  .ant-form-item-label {
    width: $text-width;
    line-height: $inline-horizontal-label-height;
  }

  .ant-form-item-control-wrapper {
    width: calc(100% - #{$text-width});

    &[ng-reflect-ng-switch='textarea'] .ant-form-item-control {
      line-height: 0;
    }
  }

  // .ant-calendar-picker {
  //   width: calc(100% - #{$text-width});
  // }

  // .ant-time-picker {
  //   width: calc(100% - #{$text-width});
  // }

  // .ant-input-number {
  //   width: calc(100% - #{$text-width});
  // }

  .ant-form-item-label label {
    position: unset;
    left: unset;
    top: unset;
    padding-right: unset;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: $inline-horizontal-label-height;
    white-space: normal;
    line-height: calc(#{$inline-horizontal-label-height} / 2);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .custom-explain {
    height: 1.5em;
  }

  .ant-form-item-control {

    line-height: $inline-horizontal-label-height;

    textarea {
      margin-bottom: 0;
      border-radius: 2px;
      min-height: $inline-horizontal-label-height !important;
      // padding-top: 6px;
    }

    .ant-input-affix-wrapper textarea+.ant-input-suffix {
      right: 18px;
      color: #666;
    }
  }
}

.has-error {

  .ant-select-selection,
  .ant-input {
    border-color: $error !important;
  }
}

/*
增大ant默认模态层的宽度
*/
.ant-modal-wrap:not(.custom) .ant-modal:not(.ant-modal-confirm) {
  width: 900px !important;
  min-width: 900px !important;
}

/*根据窗口高度改变模态层最大高度*/
@media(min-height: 600px) {
  .ant-modal-wrap:not(.custom-height) .ant-modal:not(.ant-modal-confirm) .ant-modal-body {
    max-height: 400px !important;
  }
}

@media(min-height: 700px) {
  .ant-modal-wrap:not(.custom-height) .ant-modal:not(.ant-modal-confirm) .ant-modal-body {
    max-height: 500px !important;
  }
}

@media(min-height: 800px) {
  .ant-modal-wrap:not(.custom-height) .ant-modal:not(.ant-modal-confirm) .ant-modal-body {
    max-height: 600px !important;
  }
}

@media(min-height: 900px) {
  .ant-modal-wrap:not(.custom-height) .ant-modal:not(.ant-modal-confirm) .ant-modal-body {
    max-height: 700px !important;
  }
}

/*
对模态层标题栏的副标题添加自定义字体样式
*/
.ant-modal-title {
  font-size: 18px;

  small {
    font-size: $large-font-size;
    color: $grey-7;
  }
}

/*
禁用侧边栏：取消，除第一个和最后一个菜单项之外其他菜单项的上下外边距
*/
.ant-menu-item:not(:last-child):not(:first-child) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
禁用侧边栏：重置第一个菜单项样式
*/
.ant-menu-item:first-child {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/*
禁用侧边栏：重置最后一个菜单项样式
*/
.ant-menu-item:last-child {
  margin-bottom: 4px !important;
  margin-top: 0 !important;
}

/*
禁用侧边栏：重置仅有一个菜单项时的样式
*/
.ant-menu-item:first-child:last-child {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/*
重置按钮样式
*/
.ant-btn {
  box-shadow: none !important;

  &:hover,
  &:focus {
    color: $blue-7 !important;
    border-color: $blue-7 !important;
  }

  &:active,
  &.active {
    color: $blue-8 !important;
    border-color: $blue-8 !important;
  }

  &.ant-btn-primary,
  &.ant-btn-background-ghost {

    &:hover,
    &:focus {
      background-color: $blue-7 !important;
      color: #fff !important;
    }

    &:active,
    &.active {
      background-color: $blue-8 !important;
      color: #fff !important;
    }
  }

  &[disabled],
  &.disabled {
    border: 1px $grey-5 solid;
    background-color: $grey-3 !important;
    color: $grey-6;

    &:hover,
    &:focus,
    &.active {
      border: 1px $grey-5 solid !important;
      background-color: $grey-3 !important;
      color: $grey-6 !important;
    }
  }

  &.btn-text {
    background-color: #fff !important;
    border-color: #fff !important;
    color: $text-color !important;

    &.ant-btn-primary {
      color: $blue-6 !important;

      &:hover,
      &:focus {
        color: $blue-7 !important;
        background-color: #fff !important;
      }

      &:active,
      &.active {
        color: $blue-8 !important;
        background-color: #fff !important;
      }

      &[disabled],
      &.disabled {
        background-color: #fff !important;
        border-color: #fff !important;
      }
    }

    &[ant-click-animating-without-extra-node]:after,
    &.ant-click-animating-node {
      animation: none;
    }
  }

  &+.ant-btn {
    margin-left: 8px;
  }

  &+.ant-btn-group {
    margin-left: 8px;
  }
}

.ant-btn-group>.ant-btn {
  margin-left: unset;
}

.ant-btn-group+.ant-btn {
  margin-left: 8px;
}

.ant-calendar-picker {
  width: 100% !important;
}

// .ant-message{
//   top: 104px
// }

/*
禁用侧边栏菜单部分dom动画特性
*/
.ant-menu-submenu {
  transition: none !important;

  .ant-menu-submenu-title {
    transition: none !important;
  }

  .ant-menu-sub {
    transition: none !important;
  }
}

/*
重写table控件默认样式
*/
.dx-datagrid {
  font-size: $font-size;

  .dx-freespace-row>td {
    border-color: transparent !important;
    height: 0 !important;
  }

  .dx-datagrid-rowsview {
    border-top-width: 0;
  }

  .dx-datagrid-rowsview .dx-row.dx-state-hover {
    &.dx-freespace-row>td {
      background-color: transparent !important;
    }
  }

  .dx-datagrid-rowsview .dx-row.dx-selection .dx-col-fixed {
    background-color: #F0F6FF;
  }

  .dx-datagrid-rowsview .dx-row.dx-row-lines:first-child>td {
    border-top: none !important;

  }

  table.dx-pointer-events-none .dx-column-lines:not([role='presentation'])>td {

    // 左浮动置顶阴影（未实现，有问题）
    // &:not([colspan])+td {
    //   @include fixedShadow(right);
    // }

    // 右浮动置顶阴影
    &[colspan]+td {
      @include fixedShadow(left);
    }
  }

  .dx-datagrid-rowsview .dx-row>td {
    height: $datagrid-row-height;
    line-height: $datagrid-row-height;
    padding-top: 0;
    padding-bottom: 0;
    color: $grey-9;

    &.dx-pointer-events-none {
      border-left-width: 1px !important;
      border-right-width: 1px !important;
    }

    &:last-child {
      padding-right: $box-space;
    }

    &:first-child {
      padding-left: $box-space;
    }
  }

  .dx-datagrid-headers .dx-row>td {
    background-color: $grey-3;
    height: $datagrid-row-header-height;
    line-height: $datagrid-row-header-height;
    padding-top: 0;
    padding-bottom: 0;
    color: $grey-8;
    font-weight: 500;

    &.dx-col-fixed {
      background-color: $grey-3;
    }

    &.dx-pointer-events-none {
      border-left-width: 1px !important;
      border-right-width: 1px !important;
    }

    &:last-child {
      padding-right: $box-space;
    }

    &:first-child {
      padding-left: $box-space;
    }

    .dx-column-indicators {
      height: 100%;
    }

    .dx-column-indicators .dx-sort {
      position: relative;
      display: block !important;
      height: 100%;
      margin-left: -8px;

      &:before {
        position: absolute;
        top: 50%;
        margin-top: -9px;
        content: '' !important;
        border-width: 4px;
        border-style: solid;
        border-color: transparent;
        border-bottom-color: $grey-7;
      }

      &:after {
        position: absolute;
        top: 50%;
        margin-top: 1px;
        content: '' !important;
        border-width: 4px;
        border-style: solid;
        border-color: transparent;
        border-top-color: $grey-7;
      }

      &.dx-sort-up:before {
        border-bottom-color: $blue-6;
      }

      &.dx-sort-down:after {
        border-top-color: $blue-6;
      }
    }

    .dx-select-checkbox {
      display: inline-block !important;

      &.dx-checkbox-indeterminate {
        .dx-checkbox-icon {

          background-color: #3366ff;
          border-color: #3366ff;

          &::before {
            margin: 0;
            transform: translate(-50%, -50%);
            content: " ";
            background-color: #fff;
            height: 2px;
            width: 10px;
          }
        }
      }
    }
  }

  .dx-datagrid-headers.column-custom td:last-of-type {
    padding-right: 40px !important;
  }

  .dx-datagrid-pager {
    margin-top: 0 !important;

    .dx-pages {
      visibility: visible !important;

      .dx-navigate-button {
        padding: 7px 13px;
      }
    }
  }

  .dx-master-detail-row>td {
    background-color: $grey-2;
  }

  .dx-select-checkbox {
    display: inline-block !important;
  }

  .dx-scrollable-scroll-content {
    border-radius: 5px;
  }

  .dx-empty {
    min-height: 310px;
  }

  .dx-datagrid-nodata {
    height: 160px;
    line-height: 300px;
    background-size: auto 120px;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url('assets/img/nosearch.png');
    z-index: 10;
    top: 70px;
    transform: translate(-50%, 0);
  }

  .dx-datagrid-nodata.search-nodata {
    background-image: url('assets/img/nodata.png');
  }

  .dx-overlay {
    z-index: 1005;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .dx-loadpanel .dx-loadpanel-wrapper {
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
    height: 100% !important;
    width: 100% !important;
    top: 0;

    .dx-loadpanel-indicator {
      width: 64px;
    }
  }
}

bz-table-panel .dx-datagrid {

  >.dx-datagrid-rowsview,
  .dx-datagrid-headers {
    border-left-width: 0;
    border-right-width: 0;
  }

  >.dx-datagrid-rowsview {
    border-top-width: 0;
    border-bottom-width: 0;
  }
}

bz-query-panel.bottom-action-layout+bz-table-panel .dx-datagrid {
  margin: 0 16px;
}

.no-select-all>.dx-datagrid .dx-datagrid-headers .dx-command-select {
  pointer-events: none;

  .dx-checkbox-container {
    visibility: hidden;
  }
}

/** dataGrid自定义行时表格样式修改 */
dx-data-grid[rowtemplate] {
  .dx-datagrid-rowsview {
    border-bottom: none;

    .dx-datagrid-content .dx-datagrid-table tr td {
      border-right: 1px solid #ddd !important;
      border-bottom: 1px solid #ddd !important;
      color: #333333;
      height: 36px;
      line-height: 36px;
      padding: 0 7px;

      &:last-child {
        border-right: none;
      }
    }
  }
}

/*

重写unex字体图标样式
*/
.unex {
  vertical-align: middle;
}

.ant-btn,
bz-query-action-bar,
bz-query-secondary-action {

  .unex-icon-leadin,
  .unex-icon-leadout {
    font-size: 12px;
    margin-right: 4px;
  }
}

.ant-tabs-nav {
  .ant-tabs-ink-bar {
    height: 3px;
  }

  .ant-tabs-tab {
    padding: 12px 4px;
  }
}

/** 修复nz-select样式问题 */
.ant-select-search--inline {
  overflow: hidden;
}

/** 重置ant-table样式 */
.ant-table-thead>tr>th {
  height: 39px;
  line-height: 39px;
  padding: 0 7px;
  color: #666;
  background-color: #f5f5f5;

  .ant-checkbox-checked .ant-checkbox-inner::after {
    left: 21%;
  }
}

.ant-table-tbody>tr>td {
  color: #333333;
  min-height: 35px;
  height: 35px;
  padding: 4px 7px;
}

.ant-table-wrapper {

  .ant-checkbox-checked .ant-checkbox-inner::after {
    left: 25%;
  }

  .ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: #3366ff;
    border-color: #3366ff;

    &:hover {
      border-color: #003df5;
    }

    &::after {
      width: 10px;
      height: 2px;
      background-color: #fff;
    }
  }

  .ant-spin-nested-loading>div>.ant-spin {
    max-height: unset;
  }

  .ant-table-row-expand-icon {
    line-height: 17px;
  }
}

.ant-table-thead>tr>th .ant-table-column-sorter .ant-table-column-sorter-inner-full {
  margin-top: -7px;
}

.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
  background-color: #fafafa;
}

.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-thead>tr:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-tbody>tr:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {

  &[ng-reflect-nz-checked]:not([ng-reflect-nz-checked=false]).ant-table-selection-column,
  &[ng-reflect-nz-checked]:not([ng-reflect-nz-checked=false]).ant-table-selection-column~td {
    background-color: #F0F6FF;
  }
}


/** 修改nz-switch样式 */
.ant-switch {
  background: #E8E8E8;
  border-radius: 2px;

  &::after {
    background: #BFBFBF;
    box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.30);
    border-radius: 2px;
    left: 0;
    width: 22px;
    height: 22px;
    top: -1px;
  }

  &.ant-switch-small {
    width: 32px;
    height: 16px;
    min-width: 32px;

    &::after {
      width: 16px;
      height: 16px;
    }
  }
}

.ant-switch-checked {
  background: #D6E6FF;

  &::after {
    background: #3366FF;
    box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.30);
    border-radius: 2px;
    margin-left: 0;
    left: 100%;
  }

  &.ant-switch-small {
    width: 32px;
    height: 16px;
    min-width: 32px;
  }
}

// spa模式下样式修复
bz-root,
#ng-root,
.cdk-overlay-container {
  .ant-calendar-range {
    .ant-calendar-date-panel {
      width: 100%;
    }
  }

  .ant-select-arrow {
    transition: none;
    transform: none;

    &::after {
      content: none;
    }
  }

  .ant-select-dropdown-menu-item {
    font-size: 12px;
  }

}

.ace-widget-layout-menu {

  .ant-menu-inline>.ant-menu-item,
  .ant-menu-inline>.ant-menu-submenu>.ant-menu-submenu-title,
  .ant-menu-sub.ant-menu-inline>.ant-menu-item,
  .ant-menu-sub.ant-menu-inline>.ant-menu-submenu>.ant-menu-submenu-title {
    height: 48px;
    line-height: 48px;
    font-size: 14px;
  }

  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected,
  .ant-menu.ant-menu-dark .ant-menu-item-selected {
    background: rgba(0, 0, 0, .25);
  }
}
